<template>
    <div class="cardContent" v-if="!developedFlag">
        <a-alert
                message="提示信息"
                description="您所在的研发部门当前并未选择研发产品，请选择一项方案进行研发"
                type="info"
                show-icon
        />
        <br>
        <a-table :dataSource="taskList"
                 :columns="columns"
                 :pagination="false"
                 size="small"
                 bordered>
            <template #bodyCell="{text,record,index,column}">
                <template v-if="column.key == 'createTime'">
                    {{formatDate(text)}}
                </template>
                <a-space v-if="column.key == 'action'">
                    <a-button type="primary" @click="showDrawer(record)">办理任务</a-button>
                    <a-popconfirm
                            title="删除数据无法恢复，请确认是否删除？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="okDelete(record.id)"
                    >
                        <a-button type="danger">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
    </div>
    <div class="cardContent" v-if="developedFlag">
        <a-page-header
                :title="loginUser.roleName"
                sub-title="欢迎您回来，请查看您的研发任务"
                :avatar="{ src: loginUser.pic }"
        >
            <template #tags>
                <a-tag color="blue">Running</a-tag>
            </template>
            <template #extra>
                <a-button v-for="(item,i) in drawerData.sequenceList"
                          :key="i"
                          :type="item == '放弃研发' ? 'danger' : 'primary'"
                          @click="submitOk(item)">
                    {{item}}
                </a-button>
            </template>
        </a-page-header>
    </div>
    <div class="cardContent" v-if="developedFlag">
        <a-form :model="drawerData.billInfo" layout="vertical">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" name="title">
                        <a-input v-model:value="drawerData.billInfo.title" :disabled="true"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="研发资金">
                        <a-input v-model:value="drawerData.billInfo.rdFunding" :disabled="true"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="状态" name="status">
                        <a-tag color="processing">
                            <template #icon>
                                <sync-outlined :spin="true"/>
                            </template>
                            审批中
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="设计理念" name="remark">
                        <a-textarea v-model:value="drawerData.billInfo.designConcept"
                                    :disabled="disabled" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="研发成品图">
                        <upload v-model:imgUrl="drawerData.billInfo.pic"
                                :upload-url="'http://47.113.223.105:8088/upload'"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="单件制作成本">
                        <a-input-number addon-after="￥"
                                        :min="1"
                                        v-model:value="drawerData.billInfo.productionCosts"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="批注"
                                 v-bind="validateInfos.comment"
                                 name="comment">
                        <a-textarea v-model:value="drawerData.comment" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <a-list
                item-layout="horizontal"
                size="large"
                style="margin-top: 10px"
                bordered
                :data-source="drawerData.comments"
        >
            <template #header>
                <div>批注列表</div>
            </template>
            <template #renderItem="{ item, index }">
                <a-list-item>
                    <a-list-item-meta>
                        <template #title>
                            {{ item.username }}({{item.roleName}})
                        </template>
                        <template #avatar>
                            <a-avatar :src="item.pic"/>
                        </template>
                        <template #description>{{item.fullMessage}}</template>
                    </a-list-item-meta>
                    <div>
                        {{formatDate(item.time)}}
                    </div>
                </a-list-item>
            </template>
        </a-list>
    </div>
    <!--    处理研发方案-->
    <a-drawer
            title="研发方案"
            :width="1000"
            :visible="developedVisible"
            :body-style="{ paddingBottom: '40px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="developedVisible = false"
    >
        <a-form :model="drawerData.billInfo" layout="vertical">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" name="title">
                        <a-input v-model:value="drawerData.billInfo.title" :disabled="true"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="研发资金">
                        <a-input v-model:value="drawerData.billInfo.rdFunding" :disabled="true"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="状态" name="status">
                        <a-tag color="warning">
                            <template #icon>
                                <exclamation-circle-outlined/>
                            </template>
                            等待研发部门确认
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="设计理念" name="remark">
                        <a-textarea v-model:value="drawerData.billInfo.designConcept"
                                    :disabled="disabled" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="批注"
                                 v-bind="validateInfos.comment"
                                 name="comment">
                        <a-textarea v-model:value="drawerData.comment" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-space>
                        <a-button v-for="(item,index) in drawerData.sequenceList"
                                  :key="index" type="primary"
                                  @click="submitOk(item)">
                            {{item}}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
        </a-form>
        <a-list
                item-layout="horizontal"
                size="large"
                style="margin-top: 10px"
                bordered
                :data-source="drawerData.comments"
        >
            <template #header>
                <div>批注列表</div>
            </template>
            <template #renderItem="{ item, index }">
                <a-list-item>
                    <a-list-item-meta>
                        <template #title>
                            {{ item.username }}({{item.roleName}})
                        </template>
                        <template #avatar>
                            <a-avatar :src="item.pic"/>
                        </template>
                        <template #description>{{item.fullMessage}}</template>
                    </a-list-item-meta>
                    <div>
                        {{formatDate(item.time)}}
                    </div>
                </a-list-item>
            </template>
        </a-list>
    </a-drawer>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message, Form} from 'ant-design-vue'
    import {SyncOutlined, ExclamationCircleOutlined} from '@ant-design/icons-vue'
    import store from '@/store'
    import dayjs from 'dayjs'
    import upload from '@/components/upload'
    import {isEmpty} from "@/utils/Tool";

    export default {
        name: "DevelopedCenter",
        components: {
            SyncOutlined,
            ExclamationCircleOutlined,
            upload
        },
        setup() {
            const columns = [
                {
                    title: '任务ID',
                    dataIndex: 'taskId',
                    key: 'taskId',
                },
                {
                    title: '申请名称',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '方案发布时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                },
                {
                    title: '操作',
                    key: 'action',
                }
            ]
            const commentColumns = [
                {
                    title: '时间',
                    dataIndex: 'time',
                    key: 'time',
                },
                {
                    title: '批注人',
                    dataIndex: 'userId',
                    key: 'user',
                },
                {
                    title: '批注信息',
                    dataIndex: 'fullMessage',
                    key: 'fullMessage',
                },
            ]

            const useForm = Form.useForm
            const loginUser = ref({})
            const task = ref({})
            const taskList = ref()
            const drawerData = ref({
                comment: ''
            })
            const {validate, validateInfos,resetFields} = useForm(drawerData, {
                comment: [{required: true, message: '请输入批注信息', trigger: ['submit', 'change']}]
            })
            const developedVisible = ref(false)
            const developedFlag = ref(false)
            const disabled = ref(true)

            const load = () => {
                axios.get('conceptualProcess/getDevelopedTask/' + loginUser.value.id).then(rs => {
                    console.log("查找待办事务结果：", rs)
                    if (rs.data.isDeveloped) {
                        resetFields()
                        drawerData.value = rs.data.taskForm
                        task.value = rs.data.task
                        drawerData.value.comment = ''
                        developedFlag.value = true
                    } else {
                        taskList.value = rs.data.taskList
                        developedFlag.value = false
                    }
                })
            }

            const showDrawer = obj => {
                task.value = JSON.parse(JSON.stringify(obj))
                axios.get('process/viewTaskForm/' + obj.taskId).then(rs => {
                    console.log("获取task信息结果：", rs)
                    drawerData.value = rs.data
                    drawerData.value.comment = ''
                    resetFields()
                    developedVisible.value = true
                })
            }
            const submitOk = (buttonValue) => {
                validate().then(() => {
                    let completeData = {
                        sequence: buttonValue,
                        userId: loginUser.value.id,
                        taskId: task.value.taskId,
                        comment: drawerData.value.comment
                    }
                    if (buttonValue == '交付') {
                        if (isEmpty(drawerData.value.billInfo.productionCosts)) {
                            message.error("请输入单件制作成本")
                            return
                        } else if (isEmpty(drawerData.value.billInfo.pic)) {
                            message.error("请上传研发成品图")
                            return;
                        }
                        completeData.conceptualProduct = drawerData.value.billInfo
                    }
                    axios.post('conceptualProcess/complete', completeData).then(rs => {
                        if (rs.code == 200) {
                            message.success("审批成功")
                            developedVisible.value = false
                            load()
                        }
                    })
                }).catch(() => {
                    console.log("校验不通过")
                })
            }

            const formatDate = (time) => {
                return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
            }

            onMounted(() => {
                loginUser.value = store.state.user
                load()
            })
            return {
                columns,
                load,
                task,
                taskList,
                showDrawer,
                submitOk,
                drawerData,
                commentColumns,
                validateInfos,
                loginUser,
                formatDate,
                disabled,
                developedVisible,
                developedFlag
            }
        }
    }
</script>

<style scoped>
    .cardContent {
        background: #fff;
        margin: 10px 10px 0 10px;
        padding: 15px;
    }
</style>